<template>
    <div>
        <el-upload :class="uploadClass(type)" v-model:file-list="fileList" :drag="drag" :disabled="disabled"
            :limit="limit" :multiple="multiple">
            <!-- 按钮形式 start -->
            <el-button type="primary" v-if="type == 'button'">
                <BIcon name="Upload" color="#fff" class="bt-icon"></BIcon>
                {{ text }}
            </el-button>
            <!-- 按钮形式 end -->

            <!-- 照片形式 start -->
            <BIcon class="upload-icon" name="plus" v-if="type == 'drag'"></BIcon>
            <!-- 照片形式 end -->
        </el-upload>
        <div class="tip">{{ tipTxt }}</div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import BIcon from './BIcon.vue';
defineProps({
    // 上传形式
    type: {
        type: String,
        default: 'button'
    },
    // 是否多选
    multiple: {
        type: Boolean,
        default: false
    },
    // 是否开启拖拽
    drag: {
        type: Boolean,
        default: false
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    limit: {
        type: Number,
        default: 3
    },
    text: {
        type: String,
        default: '上传文件'
    },
    tipTxt: {
        type: String,
        default: '最大上传3张图片，图片大小不超过500kb'
    },
})

let fileList = ref([]);

// 上传样式
const uploadClass = (type) => {
    const classObj = {
        button: '',
        drag: 'b-drag'
    }
    return classObj[type]
}
</script>

<style scoped lang='scss'>
.bt-icon {
    margin-right: 5px;
}

.upload-icon {
    width: 120px;
    height: 120px;
}

.b-drag {
    border: 1px dashed #ccc;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        border-color: $b-border-hover-color;
    }
}

.tip {
    font-size: 12px;
    margin-top: 10px;
    line-height: 1;
    color: $b-text-tip-color;
}
</style>
